<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js的dom操作留言板</title>
    <style>
        body,p,h3{ margin: 0px; padding: 0px;}
        .box{ margin: 10px auto; width: 810px;}
        #p{ width: 800px; height: 200px; border: 1px solid #333; }
        #text{ width: 796px; height: 100px; border: 1px solid #333; margin-top: 10px; }
        p{ width: 800px;height: 40px; line-height: 40px; display: block;}
        p span{ display: inline-block; float: right;  margin-right: 50px; color: crimson;}
    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var otext=document.getElementById("text");
            var op=document.getElementById("p");
            btn.onclick=function(){
                var text=otext.value;
                if(text==""){
                    alert("先说点什么吧！")
                }else{
                    var ops=op.childNodes.length+1;
                    var node=document.createElement("p");
                    var node1=document.createTextNode(ops+"、"+text);
                    node.appendChild(node1);
                    op.appendChild(node);
                    otext.value="";
                    mouse();
                    mouseout();
                }
            }
            function mouse(){
                var ops=op.childNodes;
                for(var i=0;i<ops.length;i++){
                    ops[i].onmouseover=function(){
                        this.style.backgroundColor="yellow";
                        var node=document.createElement("span");
                        var node1=document.createTextNode("删除");
                        node.appendChild(node1);
                        this.appendChild(node);
                        this.childNodes[1].onclick=function(){
                            this.parentNode.parentNode.removeChild(this.parentNode);
                            px();
                        }
                    }
                }
            }
            function px(){
                var ops=op.childNodes;
                for(var i=0;i<ops.length;i++){
                    var str=ops[i].innerHTML;
                    var arr= str.split("、");
                    ops[i].innerHTML=i+1+"、"+arr[1];
                  console.log();
                }
            }
            function mouseout(){
                var ops=op.childNodes;
                for(var i=0;i<ops.length;i++){
                    ops[i].onmouseout=function(){
                        this.style.backgroundColor="";
                        var child=this.childNodes;
                        this.removeChild(child[1]);
                    }
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <h3>留言内容</h3>
    <p id="p"></p>
    <textarea id="text"></textarea>
    <button id="btn">发布留言</button>
</div>
</body>
</html>